<template>
    <div id="line" style="width: 700px;height:300px;float: left;margin:20px"></div>
  
</template>

<script>
import axios from 'axios'
import 'echarts' 

export default {
  name: 'HelloWorld',
  data() {
      return {  
        linedata: [],
        linedatas:[]
      }
  },
  //??
  mounted(){
    this.drawLine();
    this.getdata();
    this.refresh();
  },
  
  methods: {
    //??
    refresh(){
          this.getdata();
          this.drawLine()   
      },
      getdata() {
        
        axios.get('../../assets/linedata.json')
          .then((res) => {
            this.lindata = console.log(res.data)
            for (var i = 0; i < res.data.before_box_office.length; i++){
              this.linedatas.push({
                before_box_office:this.lindata[i].before_box_office,
                after_box_office:this.lindata[i].after_box_office,
                new_cases:this.lindata[i].new_cases
            })
          }
          console.log(this.linedatas)
          })
          .catch((error) => {
            console.log(error);
          })
      },







    drawLine(){

        var that = this;

        //初始化echarts实例
        var myLine = this.$echarts.init(document.getElementById('line'));

        //图表的配置项和数据
        var option = {

       
           
             
                timeline: {      // timeline:时间轴
                    axisType: 'category',
                    data: ['2020.1','2020.2','2020.3','2020.4','2020.5','2020.6','2020.7','2020.8','2020.9','2020.10','2020.11','2020.12','2021.1','2021.2','2021.3','2021.4','2021.5','2021.6','2021.7','2021.8','2021.9','2021.10','2021.11','2021.12','2022.1','2022.2','2022.3'],
                    loop: true,  //是否循环播放
                    autoPlay: true, //是否自动播放
                    playInterval: 2000       // 间隔时间
                },
                title: {
                    text: '疫情前后每日电影票房及当日新增确诊人数',
                },
                grid: {},
                xAxis: [
                    {
                        'type': 'category',//类目轴
                        'data': ['1日', '2日', '3日', '4日', '5日', '6日', '7日','8日', '9日', '10日', '11日', '12日', '13日', '14日','15日', '16日', '17日', '18日', '19日', '20日', '21日','22日', '23日', '24日', '25日', '26日','27日', '28日', '29日', '30日', '31日'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        scale: true,            //脱离0值比例
                        boundaryGap: false           // 折线紧挨边缘
                    },
                ],
                yAxis: [
                    {
                        name:'当日票房',
                        'type': 'value',//数值轴
                        min: 0,
                        interval: 100000000,
                        axisLabel: {
                            formatter: '{value}元'
                        }
                    },
                    {
                        name:'当日新增确诊人数',
                        'type': 'value',
                        min: 0,
                        interval: 1000,
                        axisLabel: {
                            formatter: '{value}人'
                        }
                    }
                ],
                legend: {
                    data: ['疫情前每日票房', '疫情后每日票房', '当日新增确诊人数'],
                    right:20
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                        color: '#999'
                        }
                    }
                },

                series: [
                    {name: '疫情前每日票房', type: 'bar',data: this.linedatas},
                    {name: '疫情后每日票房', type: 'bar',data: this.linedatas},
                    {name: '当日新增确诊人数', type: 'line',yAxisIndex: 1,data: this.linedatas}
                ]    
        }; 
 
        //使用刚指定的配置项和数据显示图表。
        myLine.setOption(option);
        this.myLine.on('timelinechanged',function(){
        that.refresh();
        })

    },
  },
};
</script>

<style scoped>

</style>

